<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.Vue如何监测数组的改变</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h3>学校名称：{{school.name}}</h3>
			<h3>学校地址：{{school.address}}</h3>
			<h3>学校学科：</h3>
			<ul>
				<li v-for="s in school.subjects">
					{{s}}
				</li>
			</ul>
			<button @click="changeAllSubject">修改掉所有的学科</button>
			<button @click="changeFirstSubject">修改掉第一个学科</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#demo',
				data:{
					school:{
						name:'尚硅谷',
						address:'宏福科技园',
						subjects:['前端','大数据','java','UI']
					}
				},
				methods:{
					changeAllSubject(){
						this.school.subjects = ['挖掘机','美容美发','厨师','汽修']
					},
					changeFirstSubject(){
						this.school.subjects.splice(0,1,'挖掘机')
					}
				}
			})
			console.log(vm)
		</script>
	</body>
</html>